const path = require('path') // nodejs 核心模块，专门用来处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin') // 将 html 打包到 dist 目录下
const ESLintPlugin = require('eslint-webpack-plugin')
const loader = require('sass-loader')

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 文件输出路径，其中 __dirname 表示当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'),
        // 输出的文件名
        filename: 'static/js/[name].bundle.js',
        // 自动清空上一次的打包结果
        clean: true
    },
    resolve: {
        alias: {
            // 配置路径别名
            '@': path.resolve(__dirname, 'src')
        }
    },
    // 加载器
    module: {
        // loader 的配置规则
        rules: [            
            // css 资源加载器
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            // scss 资源加载器
            {
                test: /\.s[ac]ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            // 图片资源加载器
            // 在过去的 webpack4 中，我们处理图片是通过 file-loader 和 url-loader 进行处理
            // 现在 webpack5 已经将两个 Loader 功能添加到  webpack 里了，我们只需要简单的配置即可处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        // 小于10kb的图片转成base64
                        // 优点：减少请求数量 缺点：体积会更大
                        // 转为base64后会以字符串的格式出现在路径上
                        maxSize: 100 * 1024 // 100kb
                    }
                },
                generator: {
                    // 输出图片的名称
                    // [hash:10] 取图片的hash的前10位
                    // [ext] 取文件原来的扩展名
                    // [query] 携带的参数 
                    filename: "static/images/[hash:10][ext][query]"
                }
            },
            // 处理 iconfont 以及音视频等其他资源
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",
                generator: {
                    // 输出名称
                    filename: "static/media/[hash:10][ext][query]",
                }
            },
            // 配置 babel-loader
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        ]
    },
    // 优化配置
    optimization: {
        splitChunks: {
            chunks: 'all'
        },
        usedExports: true,
        minimize: true
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            // 模板：以 public/index.html 文件创建的html文件
            // 新的 html 文件特点：1.结构和原来一致 2.自动引入打包输出资源
            // template: '/index.html'
            template: path.resolve(__dirname, 'public/index.html')
        }),
        // plugin 配置
        new ESLintPlugin({
            // 检测哪些文件
            context: path.resolve(__dirname, "src"),
            overrideConfigFile: path.resolve(__dirname, '.eslintrc.js')
        })
    ],
    // 开发服务器
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist')
        },
        compress: true, // 允许压缩
        host: 'localhost',
        port: 9000,
        open: true
    },
    // 模式
    mode: 'development'
}